:host{
    position: relative;
}
.component{
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    z-index: 0;

    &.read-only{
        & textarea{
            resize: none;
        }
    }
    & textarea{
        font-family: Arial;
        font-size: 12px;
        max-width: 360px;
        max-height: 200px;
        height: 40px;
        min-height: 20px;
        outline: none;
        border: 2px solid rgba(0,0,0,0.2);
        background-color: var(--background);
        color: #fff;
        padding: 0.2em;
        cursor: move;
        transition: background-color 0.1s linear;
        &::-webkit-scrollbar {
            background-color: transparent;
        }
        &::-webkit-scrollbar-track {
            display: none;
        }
        &::-webkit-scrollbar-thumb {
            display: none;
        }
        &::placeholder{
            color: #a1a1a1;
            transition: transform 0.1s ease-out;
        }
        &:hover{
            background-color: var(--background-light);
            &::placeholder{
                transform: translateX(10px);
            }
        }
        &.italic{
            font-style: italic;
        }
        &.bold{
            font-weight: bold;
        }
    }
    &.is-current-selection{
        & textarea{
            cursor: text;;
        }
    }
}
.text-format-container{
    display: flex;
    gap: 0.35em;
    & span{
        margin: 0;
    }
}
.endpoint-protocol{
    flex-grow: 1;
    text-align: right;
    & span{
        font-size: 0.55rem;
        color: var(--main);
    }
}
.actions-container{
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;
    & button{
        width: max-content;
    }
}
